<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:p="http://primefaces.org/ui"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:f="http://java.sun.com/jsf/core">

    <p:panel header="Inicio" style="border: none;">
        <div align="center">
            <p><h:outputText value="REGISTRO DE PRACTICAS" style="font-weight: bold; font-size: 18px; color:#069;"/></p>

            <h:form style="width: 96%" id="formRegisterPracticeId">
                <p:panelGrid id="panelGridId">
                    <f:facet name="header">
                        <p:row>
                            <p:column colspan="6">
                                <h:outputText value="Registro de Practicantes"/>
                            </p:column>
                        </p:row>
                    </f:facet>

                    <p:row>
                        <p:column>
                            <h:outputText value="CÓDIGO"/>
                        </p:column>
                        <p:column colspan="2">
                            <p:inputText value="#{newPracticeBean.practice.codeAlumn}" id="inputCode"
                                         required="true" label="Alumno" style="width: 80%"
                                         disabled="#{newPracticeBean.isEdit}">
                            </p:inputText>
                            <p:commandButton process="inputCode" 
                                             oncomplete="if(!args.validationFailed){processWS.show()}"
                                icon="ui-icon-check" />
                        </p:column>
                        <p:column>
                            <h:outputText value="AREA"/>
                        </p:column>

                        <p:column colspan="2">
                            <p:inputText value="#{newPracticeBean.practice.nameArea}"
                                         style="width: 98%"/>
                        </p:column>
                    </p:row>
                    
                    <p:row>
                        <p:column colspan="3">
                            <h:outputText value="NOMBRE: #{newPracticeBean.practice.names}" style="color: blue;" id="nameWS"/>
                        </p:column>
                        <p:column colspan="3">
                            <h:outputText value="CRÉDITOS APROVADOS: #{newPracticeBean.practice.credit}" style="color: blue;" id="creditWS"/>
                        </p:column>
                    </p:row>

                    <p:row>
                        <p:column>
                            <h:outputText value="TITULO DEL PROYECTO"/>
                        </p:column>
                        <p:column colspan="2">
                            <p:inputTextarea value="#{newPracticeBean.practice.titleProject}" 
                                             required="true" label="Telefono"
                                             autoResize="false" style="width: 98%"/>
                        </p:column>
                        <p:column>
                            <h:outputText value="RESUMEN"/>
                        </p:column>
                        <p:column colspan="2">
                            <p:inputTextarea value="#{newPracticeBean.practice.summaryProject}" required="true" label="Telefono"
                                             autoResize="false" style="width: 98%"/>
                        </p:column>
                    </p:row>

                    <p:row>
                        <p:column>
                            <h:outputText value="Fecha inicio:"/>
                        </p:column>
                        <p:column colspan="2">
                            <p:calendar locale="es" value="#{newPracticeBean.practice.startDate}" required="true" label="tgdfg" >
                                <p:ajax event="dateSelect" listener="#{newPracticeBean.handleDateSelect}" update="calendarTwo" />  
                            </p:calendar>
                        </p:column>
                        <p:column>
                            <h:outputText value="Fecha Fin:"/>
                        </p:column>
                        <p:column colspan="2">
                            <h:outputText value="#{newPracticeBean.practice.endDate}" id="calendarTwo" >
                                <f:convertDateTime parent="dd/MM/YYY"/>
                            </h:outputText>
                        </p:column>
                    </p:row>

                    <p:row>
                        <p:column colspan="1">
                            <h:outputText value="JEFE INMEDIATO"/>
                        </p:column>
                        <p:column colspan="5">
                            <p:inputText value="#{newPracticeBean.practice.inmmediativeBoss}" style="width: 98%"/>
                        </p:column>
                    </p:row>

                    <p:row >
                        <p:column colspan="1">
                            <h:outputText value="COMPAÑIA"/>
                        </p:column>
                        <p:column colspan="4">
                            <p:panel id="panelCompanyId">
                                <p:selectOneMenu value="#{newPracticeBean.practice.idCompany}" converter="companyconvert"
                                                 panelStyle="width: 290px;" effect="fade" style="width:300px"  
                                                 filter="true" filterMatchMode="startsWith" var="p">

                                    <f:selectItem itemValue="" itemLabel="Seleccione un valor"/>
                                    <f:selectItems value="#{newPracticeBean.listCompany}" var="company"
                                                   itemValue="#{company}" itemLabel="#{company.name}"/>

                                    <p:column>
                                        <h:outputText value="#{p.name}"/>
                                    </p:column>
                                    <p:column>  
                                        <h:outputText value="#{p.representative}"/>
                                    </p:column> 
                                </p:selectOneMenu>
                            </p:panel>
                        </p:column>
                        <p:column colspan="1">
                            <p:commandButton icon="ui-icon-person" process="@none" 
                                             onclick="registerCompany.show();"/>
                        </p:column>
                    </p:row>

                    <p:row>
                        <p:column colspan="1">
                            <h:outputText value="FUNCIONES" />
                        </p:column>
                        <p:column colspan="5">
                            <h:panelGrid  columns="2" style="width: 98% " id="funcid" >
                                <p:dataList value="#{newPracticeBean.practice.functionPracticeList}" 
                                            var="function" itemType="circle" id="funcDataListId" >
                                    <h:outputText value="#{function.detail}" />
                                    <p:commandLink value="  (remove)" style="color: blue;" 
                                                   process="funcDataListId"
                                                   action="#{newPracticeBean.removeFunctionOfPractice(function)}"
                                                   update="funcDataListId"/>

                                </p:dataList>

                                <p:commandButton icon="ui-icon-image" process="@none"
                                                 update=":addFunctionId"
                                                 oncomplete="addFunction.show();"
                                                 action="#{newPracticeBean.createFunction}"/>
                            </h:panelGrid>
                        </p:column>
                    </p:row>
                </p:panelGrid><br/>
                <h:panelGrid columns="2" cellspacing="5">
                    <p:commandButton value="Guardar" icon="ui-icon-disk" 
                                     update=":confirmPracticeId"
                                     oncomplete="confirmPractice.show();">

                    </p:commandButton>

                </h:panelGrid>
            </h:form>
            <p:commandButton value="Cancelar" style="color: red;"
                             update=":panelCenter" icon="ui-icon-home"
                             onstart="PF('blockUI').block();" oncomplete="PF('blockUI').unblock();">
                <f:setPropertyActionListener value="./content/home.xhtml" target="#{indexLoginBean.navigation}"/>
            </p:commandButton>
        </div> 
    </p:panel>

    <p:dialog header="Necesita un commentario para finalizar" modal="true" id="confirmPracticeId"
              appendTo="@(body)" widgetVar="confirmPractice" closeOnEscape="true">
        <h:form>
            <h:outputText value="Algún Commentario."/>
            <p:separator/>
            <div align="center">
                <p:inputTextarea value="#{newPracticeBean.detailHistoryPractice}" autoResize="false"
                                 required="true" requiredMessage="Necesita un mensaje para guardar..."/>
            </div>
            <p:separator/>
            <div>
                <p:commandButton value="Guardar" update="@form,:formRegisterPracticeId" 
                                 action="#{newPracticeBean.saveOrUpdatePractice}"/>
            </div>
        </h:form>
    </p:dialog>

    <p:dialog header="Agregando Función" modal="true" appendTo="@(body)" 
              widgetVar="addFunction" id="addFunctionId" closeOnEscape="true">
        <h:form>
            <h:outputText value="Datos de una función"/>
            <p:separator/>
            <div align="center">
                <h:panelGrid columns="2">                    
                    <h:outputText value="Detalle: "/>
                    <p:inputTextarea value="#{newPracticeBean.functionPractice.detail}"/>
                </h:panelGrid>
            </div>
            <p:separator/>
            <div align="center">
                <p:commandButton value="Guardar" icon="ui-icon-disk"
                                 update=":formRegisterPracticeId:funcDataListId"
                                 action="#{newPracticeBean.addFunctionToPractice}"
                                 oncomplete="addFunction.hide();"/>
            </div>
        </h:form>
    </p:dialog>

    <p:dialog id="registerCompanyId" widgetVar="registerCompany" modal="true"
              appendTo="@(body)" header="Registro de empresas">
        <div>
            <p><h:outputText value="REGISTRO DE EMPRESAS" class="title"/></p>
            <h:form id="RegisterCompany">
                <h:panelGrid columns="4"  >
                    <h:outputText value="Nombre"/>
                    <p:inputText value="#{newPracticeBean.company.name}" required="true" label="Nombre"/>

                    <h:outputText value="Nombre corto"/>
                    <p:inputText value="#{newPracticeBean.company.shortName}" required="true" label="Nombre Corto"/>

                    <h:outputText value="Correo"/>
                    <p:inputText value="#{newPracticeBean.company.email}" required="true" label="Correo"/>

                    <h:outputText value="Telefono"/>
                    <p:inputText value="#{newPracticeBean.company.phone}" required="true" label="Telefono"/>

                    <h:outputText value="DireccionWeb"/>
                    <p:inputText value="#{newPracticeBean.company.webSite}" required="true" label="Direccion Web"/>

                    <h:outputText value="pais"/>
                    <p:inputText value="#{newPracticeBean.company.idCountry}" required="true" label="Pais"/>

                    <h:outputText value="departamento"/>
                    <p:inputText value="#{newPracticeBean.company.idDepartment}" required="true" label="Dep."/>

                    <h:outputText value="provincia"/>
                    <p:inputText value="#{newPracticeBean.company.idProvince}" required="true" label="Prov."/>

                    <h:outputText value="distrito"/>
                    <p:inputText value="#{newPracticeBean.company.idDistrict}" required="true" label="Dist."/>

                    <h:outputText value="Representante" />
                    <p:inputText value="#{newPracticeBean.company.representative}" required="true" label="Representante"/>

                </h:panelGrid>
                <br/>
                <p:commandButton value="GUARDAR" action="#{newPracticeBean.saveCompany}" 
                                 update="@form,:formRegisterPracticeId:panelCompanyId" 
                                 icon="ui-icon-disk"/>

            </h:form>
        </div>
    </p:dialog>
    
    <p:dialog id="processWSId" modal="true" header="Buscando en OCDA"
              widgetVar="processWS" appendTo="@(body)">
        <div align="center">
            <h:form>
            <h:outputText value="Esta opetación puede tardar unos segundos"/><br/><br/>
            <p:commandButton value="Buscar"
                             action="#{newPracticeBean.searchPracticeInWebService()}"
                             oncomplete="processWS.hide();"
                             update=":formRegisterPracticeId:nameWS,:formRegisterPracticeId:creditWS"/> 
            </h:form>
        </div>
    </p:dialog>
    
</ui:composition>
